<template>
  <div class="adduser">
    <h2>欢迎小可爱<br>可以完善一下信息哦！</h2>
    <van-cell-group inset class="cell">
      <!-- 学号 -->
      <van-field
        v-model="user.id"
        name="id"
        label="学号"
        placeholder="暂无信息"
        readonly
        :rules="[{ required: true, message: '请填写学号' }]"
      />
      <!-- 名称 -->
      <van-field
        v-model="user.name"
        name="name"
        label="名称"
        placeholder="暂无信息"
        :rules="[{ required: true, message: '请填写名称' }]"
      />
      <!-- qq -->
      <van-field
        v-model="user.qq"
        name="qq"
        label="qq"
        placeholder="暂无信息"
      />
      <!-- 地点 -->
      <van-field name="site" label="地点">
        <template #input>
          <div style="flex:1" @click="selectSite">{{user.sid==""?"暂未选择地点":user.sname}}</div>
          <van-icon name="more-o" size="20" @click="selectSite"/>
        </template>
      </van-field>
      <!-- 打卡 -->
      <van-field name="autocard" label="打卡">
        <template #input>
          <van-switch v-model="user.autocard" size="20"/>
        </template>
      </van-field>
      <!-- 邮件 -->
      <van-field name="sendEmail" label="发邮件">
        <template #input>
          <van-switch v-model="user.sendEmail" size="20"/>
        </template>
      </van-field>
      <!-- 按钮 -->
      <van-row justify="center">
        <van-col span="8">
          <van-button plain class="btn" round type="primary" @click="handleClaer">清 空</van-button>
        </van-col>
        <van-col span="8" offset="2">
          <van-button class="btn" round type="primary" @click="handleSubmit">提 交</van-button>
        </van-col>
      </van-row>
    </van-cell-group>
  </div>
</template>
<script>
export default {
  data(){
    return {
      user:{
        id: this.$store.state.uid,
        name:"",
        qq:"",
        sid:"",
        sname:"",
        autocard: false,
        sendEmail: false
      }
    }
  },
  created(){
    // 如果没有id信息返回login
    if(!this.$store.state.uid){
      this.$router.push('/login')
      return
    }
    // 不需要注册
    if(this.$store.state.user){
      this.$router.push('/')
      return
    }
    // 如果有缓存加载缓存内容
    if(this.$store.getters.getCache('user')){
      this.user = {...this.$store.getters.getCache('user')}
    }
  },
  // 缓存编辑的信息
  beforeUnmount(){
    // 防止刷新进去时缓存
    if(this.$store.state.uid){
      this.$store.commit("setCache",{user:this.user})
    }
  },
  methods:{
    // 清除数据
    handleClaer(){
      for(let i in user){
        // 布尔类型置为false
        if(typeof user[i] == "boolean"){
          user[i] = false
        }else{
          user[i] = ""
        }
      }
      this.$notify({ type: 'primary', message: '重置成功！' })
    },
    // 提交操作
    handleSubmit(){
      // 提交动画
      let toast = this.$toast.loading({
        message: '提交中...',
        forbidClick: true,  // 禁止点击
        duration: 0,  // 消失时间
        overlay: true // 遮罩
      });
      this.axios.get("setuser",{
        params:{
          ...this.user
        }
      }).then((res)=>{
        toast.clear()
        if(res.data){
          // 提交成功
          this.$toast.success('提交成功');
          // 返回主页
          this.$router.push('/')
        }
      })
    },
    // 选择地点
    selectSite(){
      this.$router.push("addsite")
    }
  }
}
</script>
<style lang="scss" scoped>
.adduser{
  margin: 20px;
}
.btn{
  margin-top: 20px;
  width: 100%;
  flex: 1;
}
.cell{
  text-align: left;
  padding: 16px 0;
}
</style>